<!-- Include header -->
<?php include('include/header.php'); ?>
<!-- End Include Header -->
	<body>

		<!-- Navbar -->
		<div class="navbar-default navbar-fixed-top">
			<div class="container">
				<a class="pull-left" href="#hero"><img class="main-logo" src="images/KC-Logo_SM.png"></a>
				
				<!-- Nav Get Connected Button -->
				<form class="navbar-form navbar-right hidden-xs" role="form" name="email" action="thankyou.php" method="post">
					<a class="btn btn-danger" data-toggle="modal" href="#formModal">Get Connected</a>
				</form>
				<!-- End Nav Get Connected Button -->

				<!-- Mobile Nav Get Connected Button -->
				<a class="btn btn-danger navbar-form pull-right btn-sm visible-xs" data-toggle="modal" href="#formModal">Get Connected</a>
				<!-- End Mobile Nav Get Connected Button -->
				
<!-- Keep Until Final -->
				<!-- Email Field -->
				<!--<form class="navbar-form navbar-right hidden-xs" role="form" name="email" action="thankyou.php" method="post">
					<div class="form-group">
						<label class="sr-only" for="inputEmail">Email address</label>
						<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email" name="email">
					</div>
					<button type="submit" class="btn btn-danger">Get Connected</button>
				</form>
				<!-- End Email Field -->
				<!-- Mobile Nav Get Connected Button -->
				<!--<a class="btn btn-danger navbar-form pull-right" data-toggle="modal" href="#formModal">Get Connected</a>
				<!-- End Mobile Nav Get Connected Button -->

			</div>
		</div>
		<!-- End Navbar -->

		<!-- Page Container -->
		<div class="container-fluid">
			
			<!-- Hero Block -->
			<div id="hero" class="img-background-stretch">
				<div class="container">
					<!-- Block Header -->
					<div class="row">
						<div class="col-sm-6 col-xs-8 col-sm-offset-3 col-xs-offset-2">
							<img class="center-block img-responsive pad-vert" src="images/KC-Logo-LG.png">
						</div>
					</div>
					<h1 class="text-center text-white"><strong>Connect over the activities you love</strong></h1>
					<h3 class="text-center text-white">Find a local flag football group, a yoga in the park event, or new gamer buddies to pwn.</h3>
					<br class="hidden-xs hidden-sm">
					<!-- End Block Header -->
					<div class="row">
						<div class="col-sm-5 col-sm-offset-1 col-sm-push-5">
							<!-- Responsive YouTube Video Wrapper -->
							<div class="video-container">
								<iframe width="560px" height="315px" src="//www.youtube.com/embed/mHkvaeFGIe0" frameborder="0" allowfullscreen></iframe>
							</div>
							<br class="hidden-xs hidden-sm">
							<br class="hidden-xs">
							<!-- End Responsive YouTube Video Wrapper -->
						</div>
						<div class="col-sm-5 col-sm-offset-1 col-sm-pull-6">
							<br class="hidden-xs hidden-sm">
							<br class="hidden-xs hidden-sm">
							<br class="hidden-xs">
							<br class="visible-lg">

							<!-- Include Form -->
							<?php include('include/form.php'); ?>
							<!-- End Include Form -->	

						</div>
					</div>
				</div>
			</div>
			<!-- End Hero Block -->

			<!-- Modals Include -->
			<?php include('include/modals.php'); ?>
			<!-- End Modals Include -->
			
			<!-- First Block -->
			<div class="block-1">
				<div class="container pad-vert">
					<!-- Block Header -->
					<h1 class="text-center text-black"><strong>Find Awesome People</strong></h1>
					<h3 class="text-center pad-bottom">Enjoy your favorite sports and hobbies with other enthusiasts.</h3>
					<!-- End Block Header -->
					<!-- Icons/Points -->
					<div class="row">
						<div class="col-sm-4 text-center">
							<!-- Insert first icon and description -->
							<span class="main-NewFriends-icon-01 ico-lg text-green"></span>
							<h4 class="text-black">New Friends</h4>
							<p>Whether you've just moved across the country, or just deiscovered a new hobby, find new friends who share your passion.</p>
						</div>
						<div class="col-sm-4 text-center">
							<!-- Insert second icon and description -->
							<span class="main-Layers-icon-01 ico-lg text-green"></span>
							<h4 class="text-black">Layering</h4>
							<p>No matter the size of the kiwi (group) you can always invite exactly who you want.</p>
						</div>
						<div class="col-sm-4 text-center">
							<!-- Insert third icon and description -->
							<span class="main-Security-icon-01 ico-lg text-green"></span>
							<h4 class="text-black">Security</h4>
							<p>Meetup's security <a data-toggle="modal" href="#meetupModal">has more holes than swiss cheese</a>. You are kept safe with our triple level security system.</p>
						</div>
					</div>
					<!-- End Icons/Points -->
				</div>
			</div>
			<!-- End First Block -->

			<!-- Second Block -->
			<div class="block-2">
				<p class="text-left text-white activities-title"><span class="glyphicon glyphicon-heart text-white"></span> Perfect for lovers of:</p>
				<!-- Activities Icons -->
				<span class="icon-svg ico-sm"></span><span class="icon-svg2 ico-sm"></span><span class="icon-svg3 ico-sm"></span><span class="icon-svg4 ico-sm"></span><span class="icon-svg5 ico-sm"></span><span class="icon-svg6 ico-sm"></span><span class="icon-svg7 ico-sm"></span><span class="icon-svg8 ico-sm"></span><span class="icon-svg9 ico-sm"></span><span class="icon-svg10 ico-sm"></span><span class="icon-svg11 ico-sm"></span><span class="icon-svg12 ico-sm"></span><span class="icon-svg13 ico-sm"></span><span class="icon-svg14 ico-sm"></span><span class="icon-svg15 ico-sm"></span><span class="icon-svg16 ico-sm"></span><span class="icon-svg17 ico-sm"></span><span class="icon-svg18 ico-sm"></span><span class="icon-svg19 ico-sm"></span><span class="icon-svg20 ico-sm"></span><span class="icon-svg21 ico-sm"></span><span class="icon-svg22 ico-sm"></span><span class="icon-svg23 ico-sm"></span><span class="icon-svg24 ico-sm"></span><span class="icon-svg25 ico-sm"></span><span class="icon-svg26 ico-sm"></span><span class="icon-svg27 ico-sm"></span><span class="icon-svg28 ico-sm"></span><span class="icon-svg29 ico-sm"></span><span class="icon-svg30 ico-sm"></span><span class="icon-svg31 ico-sm"></span><span class="icon-svg32 ico-sm"></span><span class="icon-svg33 ico-sm"></span><span class="icon-svg34 ico-sm"></span><span class="icon-svg35 ico-sm"></span><span class="icon-svg36 ico-sm"></span><span class="icon-svg37 ico-sm"></span><span class="icon-svg38 ico-sm"></span><span class="icon-svg39 ico-sm"></span><span class="icon-svg40 ico-sm"></span><span class="icon-svg41 ico-sm"></span><span class="icon-svg42 ico-sm"></span><span class="icon-svg43 ico-sm"></span><span class="icon-svg44 ico-sm"></span><span class="icon-svg45 ico-sm"></span><span class="icon-svg46 ico-sm"></span><span class="icon-svg47 ico-sm"></span><span class="icon-svg48 ico-sm"></span><span class="icon-svg49 ico-sm"></span><span class="icon-svg50 ico-sm"></span><span class="icon-svg51 ico-sm"></span><span class="icon-svg52 ico-sm"></span><span class="icon-svg53 ico-sm"></span><span class="icon-svg54 ico-sm"></span><span class="icon-svg55 ico-sm"></span><span class="icon-svg56 ico-sm"></span><span class="icon-svg57 ico-sm"></span><span class="icon-svg58 ico-sm"></span><span class="icon-svg59 ico-sm"></span><span class="icon-svg60 ico-sm"></span><span class="icon-svg61 ico-sm"></span><span class="icon-svg62 ico-sm"></span><span class="icon-svg63 ico-sm"></span><span class="icon-svg64 ico-sm"></span><span class="icon-svg65 ico-sm"></span><span class="icon-svg66 ico-sm"></span><span class="icon-svg67 ico-sm"></span><span class="icon-svg68 ico-sm"></span><span class="icon-svg69 ico-sm"></span><span class="icon-svg70 ico-sm"></span><span class="icon-svg71 ico-sm"></span><span class="icon-svg72 ico-sm"></span><span class="icon-svg73 ico-sm"></span><span class="icon-svg74 ico-sm"></span><span class="icon-svg75 ico-sm"></span><span class="icon-svg76 ico-sm"></span><span class="icon-svg77 ico-sm"></span><span class="icon-svg78 ico-sm"></span><span class="icon-svg79 ico-sm"></span><span class="icon-svg80 ico-sm"></span><span class="icon-svg81 ico-sm"></span><span class="icon-svg82 ico-sm"></span><span class="icon-svg83 ico-sm"></span><span class="icon-svg84 ico-sm"></span><span class="icon-svg85 ico-sm"></span><span class="icon-svg86 ico-sm"></span><span class="icon-svg87 ico-sm"></span><span class="icon-svg88 ico-sm"></span><span class="icon-svg89 ico-sm"></span><span class="icon-svg90 ico-sm"></span><span class="icon-svg91 ico-sm"></span><span class="icon-svg92 ico-sm"></span><span class="icon-svg93 ico-sm"></span><span class="icon-svg94 ico-sm"></span>
				<!-- End Activities Icons -->
				<p class="text-white inline-block"><a data-toggle="modal" href="#videoModal">See how it works</a></p>
			</div>
			<!-- End Second Block -->

			<!-- Third Block -->
			<div class="block-3">
				<div class="container pad-vert">
					<!-- Block Header -->
					<h1 class="text-center text-black"><strong>Find Amazing Events</strong></h1>
					<h3 class="text-center pad-bottom">Don't settle for a movie alone. Awesome get-togethers are happening near you, join in the fun!</h3>
					<!-- End Block Header -->
					<!-- Icons/Points -->
					<div class="row">
						<div class="col-sm-4 text-center">
							<!-- Insert first icon and description -->
							<span class="main-HourGlass-icon-01 ico-lg text-blue"></span>
							<h4 class="text-black">Boredom Be Gone</h4>
							<p>No more surfing Facebook alone on Friday night. Easily find open events in your area, looking for awesome people like you. </p>
						</div>
						<div class="col-sm-4 text-center">
							<!-- Insert second icon and description -->
							<span class="main-Chair-icon-01 ico-lg text-blue"></span>
							<h4 class="text-black">Open Seats</h4>
							<p>When an event is created, the organizer can create "open seats" allowing community members to signup for the event.</p>
						</div>
						<div class="col-sm-4 text-center">
							<!-- Insert third icon and description -->
							<span class="main-Door-icon-01 ico-lg text-blue"></span>
							<h4 class="text-black">Welcoming Community</h4>
							<p>Never feel like a stranger. Our groups and events were built to be inclusive. No dues, joining interrogations, or leaders, only smiles from new friends. </p>
						</div>
					</div>
					<!-- End Icons/Points -->
				</div>
			</div>
			<!-- End Third Block -->

			<!-- Fourth Block -->
			<div class="block-4">
				<img class="hidden-xs" src="images/EventPhotos_LG.jpg">
				<img class="visible-xs" src="images/EventPhotos_SM.jpg">
					<!-- Block Header -->
					<p class="text-white eventsContainer"><span class="glyphicon glyphicon-camera text-white"></span> Pictures of recent events</p>
					<!-- End Block Header -->
			</div>
			<!-- End Fourth Block -->

			<!-- Fifth Block -->
			<div class="block-5">
				<div class="container pad-vert">
					<div class="row">
						<div class="col-sm-6 running-man pad-vert-lg">
							<!-- Block Header -->
							<h1 class="text-center text-black"><strong>Connection, even on the go</strong></h1>
							<h3 class="text-center">Stay connected, no matter where you are.</h3>
							<!-- End Block Header -->
						</div>
						<!-- Thumbnails -->
						<div class="col-sm-6 text-center">
							<!-- First Two Thumbnails -->
							<div class="row">
								<div class="col-sm-6">
									<!-- <span class="glyphicon glyphicon-comment icon-lg text-black"></span> -->
									<img class="img-round" src="images/text_thumb.jpg">
									<p>Text message integration</p>
								</div>
								<div class="col-sm-6">
									<!-- <span class="glyphicon glyphicon-phone icon-lg text-black"></span> -->
									<img class="img-round" src="images/devices_thumb.jpg">
									<p>Works on Phones or Tablets</p>
								</div>
							</div>
							<!-- Second Two Thumbnails -->
							<div class="row">
								<div class="col-sm-6">
									<!-- <span class="glyphicon glyphicon-send icon-lg text-black"></span> -->
									<img class="img-round" src="images/app_thumb.jpg">
									<p>App Coming Soon</p>
								</div>
								<div class="col-sm-6">
									<!-- <span class="glyphicon glyphicon-thumbs-up icon-lg text-black"></span> -->
									<img class="img-round" src="images/games_thumb.jpg">
									<p>Did We Mention It's FREE?</p>
								</div>
							</div>
							<!-- End Thumbnails -->
						</div>
					</div>
				</div>
			</div>
			<!-- End Fifth Block -->

			<!-- Footer Block -->
			<div class="footer img-background-stretch padding-top">
				<div class="container">
					<!-- Block Header -->
					<h3 class="text-center text-white hidden-xs">Ready to meet awesome people and enjoy amazing events?<br>Get Connected Now!</h3>
					<h4 class="text-center text-white visible-xs">Ready to meet awesome people and enjoy amazing events?<br>Get Connected Now!</h4>
					<!-- End Block Header -->
					<!-- Email Field -->
					<div class="row">
						<div class="col-sm-6 col-sm-offset-3">

							<!-- Include Form -->
							<?php include('include/form.php'); ?>
							<!-- End Include Form -->
							
						</div>
					</div>
					<!-- End Email Field -->
				</div>
			</div>
			<!-- End Footer Block -->

		</div>
		<!-- End Page Container -->

		<script src="js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>

	</body>
</html>